<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    {include file="public/static" /}
</head>

<style>
    .layui-disabled, .layui-disabled:hover{
        cursor: pointer !important;
    }
    #submitButton{
        float: right;
        margin-top: 0.5rem;
        /*display: none;*/
    }
    #result{
        color: #ff0000;
    }
    .layui-form-checkbox[lay-skin=primary]{
        padding-left: 0 !important;
        margin-left: 10px;
    }
</style>

<body>

{include file="public/nav" /}

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form class="layui-form">
                    <div class="layui-card-header">
                        创建CURD类、HTML文件 <span style="font-size: 12px;color: #ff0000">（表格标题采用数据表字段备注，请检查字段是否有备注）</span>
                    </div>
                    <div class="layui-card-body layui-table-body">
                        <table class="layui-table">
                            <tbody>
                                <tr>
                                    <th>表名</th>
                                    <th>数据量</th>
                                    <th>数据大小</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </tbody>
                            <tbody>
                                {volist name="info" id="table"}
                                    <tr>
                                        <td>{$table.Name}</td>
                                        <td>{$table.Rows}</td>
                                        <td>{$table.Data_length|formatBytes}</td>
                                        <td>{$table.Create_time}</td>
                                        <td>
                                            <a href="javascript:;" onclick="common.openWindow('表名：【{$table.Name}】', '{:url('Create/table',['table'=>$table.Name])}', '','', false, true)">
                                                <i class="layui-icon">&#x1005;</i>选择
                                            </a>
                                        </td>
                                    </tr>
                                {/volist}
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    // 表单
    layui.use(['form', 'layer'], function() {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;
        //监听checkbox
        form.on("checkbox(features)", function(data){
            let checked = data.elem.checked
            let value = data.value
            if(checked == true){
                $(".create-"+value).show()
            }else{
                $(".create-"+value).hide()
            }
        })
        //自定义验证规则
        form.verify({
            //表名
            tableName: function(value) {
                if(value == ''){
                    return '请输入要创建的表名';
                }
                if (value.replace(/^\w+$/,'')) {
                    return '请输入英文字母';
                }
            },
            listFiled: function(value){
                var checked = $("input[name='features[list]']").is(":checked")
                if(checked == true && value == ''){
                    return '请输入列表需要字段';
                }
            },
            addFiled: function(value){
                var checked = $("input[name='features[add]']").is(":checked")
                if(checked == true && value == ''){
                    return '请输入新增需要字段';
                }
            },
            editFiled: function(value){
                var checked = $("input[name='features[add]']").is(":checked")
                if(checked == true && value == ''){
                    return '请输入编辑需要字段';
                }
            }
        });
        //监听提交
        form.on('submit(add)', function(data) {
            //清空
            $("#result").html('');
            //是否勾选功能
            if(common.getCheckboxVal().length <= 0) {
                layer.msg("请勾选需要创建的功能", {icon: 5, time: 1500});
                return false
            }
            //获得数据
            var info = data.field;
            //发异步，把数据提交给php
            layer.confirm('确认以【'+info.tableName+'】表创建HTML吗？',function(){
                layer.load();
                $.ajax({
                    type:"post",
                    url:"{:url('Create/createCurd')}",
                    data: info,
                    dataType: 'json',
                    success:function (data) {
                        //输出信息
                        $("#hid").show();
                        $("#result").html(data);
                        layer.closeAll();
                    },
                    error:function (data) {
                        layer.msg("不好意思，出现了一点问题", {icon: 5});
                        layer.closeAll();
                    }
                });
            });
            //必须加上return false，不然无法关闭iframe
            return false;
        });
    });
</script>
</html>